<template>
  <hips-view>
    <hips-nav-bar
      slot="header"
      title="Progress 进度条"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />

    <demo-block title="线性进度条">
      <hips-progress :percentage="20" />
      <hips-progress
        :percentage="40"
        color="orange"
      />
      <hips-progress
        :percentage="40"
        color="blue"
      />
      <hips-progress
        :format="format"
        :percentage="100"
      />
    </demo-block>

    <demo-block title="百分比内显线性进度条">
      <hips-progress
        :text-inside="true"
        :stroke-width="26"
        :percentage="70"
        style="margin:10px 0;"
      />
      <hips-progress
        :text-inside="true"
        :stroke-width="24"
        :percentage="100"
        style="margin:10px 0;"
        color="red"
      />
      <hips-progress
        :text-inside="true"
        :stroke-width="22"
        :percentage="80"
        style="margin:10px 0;"
        color="orange"
      />
      <hips-progress
        :text-inside="true"
        :stroke-width="20"
        :percentage="50"
        style="margin:10px 0;"
        color="blue"
      />
    </demo-block>

    <demo-block title="自定义颜色">
      <hips-progress
        :percentage="percentage1"
        color="orange"
      />
      <hips-progress
        :color="colorArray"
        :percentage="percentage1"
      />
      <hips-progress
        :color="colorMethod"
        :percentage="percentage1"
      />

      <hips-button @click="sub">
        -
      </hips-button>
      <hips-button @click="add">
        +
      </hips-button>
    </demo-block>

    <demo-block title="环形进度条">
      <hips-progress
        :percentage="20"
        color="orange"
        type="circle"
      />

      <hips-progress
        :percentage="30"
        color="red"
        type="circle"
      >
        <hips-icon
          slot="icon"
          name="close"
          color="red"
        />
      </hips-progress>
    </demo-block>

    <demo-block title="仪表盘形进度条">
      <hips-progress
        :percentage="percentage2"
        color="orange"
        type="dashboard"
      />
      <div style="margin-left:30px;">
        <hips-button @click="subDash">
          -
        </hips-button>
        <hips-button @click="addDash">
          +
        </hips-button>
      </div>
    </demo-block>
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';
import { Progress, Icon, Button } from '@hips/vue-ui';

export default {
  components: {
    [Progress.name]: Progress,
    [Icon.name]: Icon,
    [Button.name]: Button,
  },
  mixins: [ BasicView ],
  data() {
    return {
      percentage1: 20,
      colorArray: [
'#f56c6c', '#e6a23c', '#5cb87a', '#1989fa', '#6f7ad3',
],
      percentage2: 40,
    };
  },

  methods: {
    changePer() {
      this.percentage1 = this.percentage1 + 10;
    },
    format(percentage) {
      return percentage === 100 ? 'ok' : `${percentage}%`;
    },
    sub() {
      if (this.percentage1) {
        this.percentage1 = this.percentage1 - 10;
      }
    },
    add() {
      if (this.percentage1 < 100) {
        this.percentage1 = this.percentage1 + 10;
      }
    },
    subDash() {
      if (this.percentage2) {
        this.percentage2 = this.percentage2 - 10;
      }
    },
    addDash() {
      if (this.percentage2 < 100) {
        this.percentage2 = this.percentage2 + 10;
      }
    },
    colorMethod(percentage) {
      if (percentage < 30) {
        return '#909399';
      } else if (percentage < 70) {
        return '#e6a23c';
      } 
        return '#67c23a';
      
    },
  },
};
</script>

<style scoped></style>
